<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团购首页</title>
    <!--自动计算根字体大小的脚本-->
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/tuangou.css">
</head>
<body>
    <div id="web">
        <!--头部-->
        <header class="clearfix">
            <!--logo-->
            <div class="head_logo fl">
                <!--就算只是一张图片，控制它大小，但还是给一个div包裹着更好，外面用a标签包裹着-->
                <a href="#">
                    <img src="images/head_logo.png" alt="">
                </a>
            </div>
           
            <!--下拉框-->
            <div class="selectBar fr">
                <select name="" id="">
                    <option value="广州市">广州市</option>
                    <option value="深圳市">深圳市</option>
                </select>
            </div>
             <!--搜索框-->
             <div class="searchBar">
                <input type="text" placeholder="请输入商品名称">
                <img src="images/search.png" alt="">
            </div>
        </header>

        <!--滚动部分-->
        <div class="section">
            <!-- banner -->
            <div class="section_banner">
                <img src="images/banner.png" alt="">
            </div>
            <!-- 优惠团购 -->
            <div class="cheap clearfix">
                <div class="cheap_text">
                    优惠团购
                </div>
                <div class="cheap_more">更多</div>
            </div>
            <!-- 图片展示 -->
            <div class="list_img clearfix">
                <ul class="clearfix">
                    <li> <a href="#"><img src="images/tuangou1.png" alt=""></a></li>
                    <li id="list1"><a href="#"><img src="images/tuangou2.png" alt=""></a></li>
                    <li><a href="#"><img src="images/tuangou3.png" alt=""></a></li>
                    <li id="list2"><a href="#"></a><img src="images/tuangou4.png" alt=""></a></li>
                </ul>
            </div>
            <!-- 猜你喜欢 -->
            <div class="cheap clearfix">
                <div class="cheap_text love">
                    猜你喜欢
                </div>
                <div class="cheap_more">更多</div>
            </div>
            <!-- 喜欢食物列表 -->
            <div class="love_food">
                <div class="love_left">
                        <a href="detail.html"><img src="images/food.png" alt=""></a>
                </div>
                <div class="love_right">
                    <div class="love_title">
                        <h4>万岁寿司（正佳店）</h4>
                        <p><100m</p>
                    </div>
                    <div class="love_content">
                        [100店通用]双人套餐
                    </div>
                    <div class="love_last">
                        <span>￥88.00</span>
                        <span id="span1">已售1000</span>
                    </div>
                </div>
            </div>
            <div class="love_food">
                <div class="love_left">
                        <a href="detail.html"><img src="images/food1.png" alt=""></a>
                </div>
                <div class="love_right">
                    <div class="love_title">
                        <h4>万岁寿司（正佳店）</h4>
                        <p><100m</p>
                    </div>
                    <div class="love_content">
                        [100店通用]双人套餐
                    </div>
                    <div class="love_last">
                        <span>￥88.00</span>
                        <span id="span1">已售1000</span>
                    </div>
                </div>
            </div>
        </div>

        <!--底部-->
        <footer>
            <ul>
                <li class="fl">
                    <a href="tuangou.html">
                        <i class="iconfont icon-path"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li class="fl">
                    <a href="fenlei.html">
                        <i class="iconfont icon-classify"></i>
                        <p>分类</p>
                    </a>
                </li>
                <li class="fl">
                    <a href="found.html">
                        <i class="iconfont icon-zhinanzhen"></i>
                        <p>发现</p>
                    </a>
                </li>
                <li class="fl">
                    <a href="my.html">
                        <i class="iconfont icon-user"></i>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </footer>
    </div>
</body>
</html>